<template>
	<view class="BusinessHours">
		<view class="StoreAddressBox">
			<view class="toStoreAddressItem">
				<view class="addresstitle">选择营业日</view>
				<view class="addressNameBox" @click="showWeekFun">
					<view class="addressName">
						<text v-for="(item,index) in weekList" :key="index" v-if="weekFlagArr[index]&&allWeek" style="margin-left: 10upx;">{{item.text}}</text> 
						<text v-if="!allWeek">请选择</text>
					</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
			</view>
			<!-- 选择营业日 -->
			<view class="sheetBox" v-if="weekFlag">
				<!-- <u-action-sheet :list="weekList" v-model="showWeek" @click="selectWeek"></u-action-sheet> -->
				<view class="weekItem" v-for="(item,index) in weekList" :key="index" :data-index="index" @click="choiceWeek">
					<view :class="[weekFlagArr[index]?'active':'']">
						<image src="../../static/mine/right_white.png"></image>
					</view>
					<text>{{item.text}}</text>
				</view>
				<view class="sure" @click="sureChoice">确定</view>
			</view>
			<view class="sheetBoxMark" v-if="weekFlag"></view>
			<!-- 选择营业日 -->
			<view class="toStoreAddressItem">
				<view class="addresstitle">选择营业时间段</view>
				<view class="addressNameBox" @click="showChoiceTime1">
					<view class="addressName">{{startTimes?startTimes:"请选择"}}</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
			</view>
			<smh-time-range v-if="time1Flag" :time="startTime" @confrim="confrim" @cancel="cancel"></smh-time-range>
			<!-- <view class="pickerBox">
				<u-picker v-model="showstartTime" mode="time" :params="params" @confirm="selectstartTime" :value="startTimes"></u-picker>
			</view> -->
			<view class="toStoreAddressItem">
				<view class="addresstitle">选择营业时间段</view>
				<view class="addressNameBox" @click="showChoiceTime2">
					<view class="addressName">{{endTimes?endTimes:"请选择"}}</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
			</view>
			<smh-time-range v-if="time2Flag" :time="endTime" @confrim="confrim1" @cancel="cancel1"></smh-time-range>
			<!-- <view class="pickerBox">
				<u-picker v-model="showendTime" mode="time" :params="params" @confirm="selectendTime" :value="endTimes"></u-picker>
			</view> -->
			<view>
				<u-toast ref="uToast" />
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="preservationBtn" @click="preservationBtn">
			<view class="preservationtxt">保存</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showWeek:false,
				weekList:[{text:'周一',id:1},{text:'周二',id:2},{text:'周三',id:3},{text:'周四',id:4},{text:'周五',id:5},{text:'周六',id:6},{text:'周日',id:7}],
				day:"",
				weekFlagArr:[true,true,true,true,true,true,true],
				oldWeek:[true,true,true,true,true,true,true],
				showstartTime:false,
				showendTime:false,
				params: {year: false,month: false,day: false,hour: true,minute: false,second: false},
				startTime:['0','0','0','0','0'],
				endTime:['0','0','0','0','0'],
				weekFlag:false,
				allWeek:true,
				id:"",
				endTimes:0,
				startTimes:0,
				time1Flag:false,
				time2Flag:false,
				timeList:[
					[
						"00:00",
						"01:00",
						"02:00",
						"03:00",
						"04:00",
						"05:00",
						"06:00",
						"07:00",
						"08:00",
						"09:00",
						"10:00",
						"11:00",
						"12:00",
						"13:00",
						"14:00",
						"15:00",
						"16:00",
						"17:00",
						"18:00",
						"19:00",
						"20:00",
						"21:00",
						"22:00",
						"23:00"
					],
					[
						"00:00",
						"01:00",
						"02:00",
						"03:00",
						"04:00",
						"05:00",
						"06:00",
						"07:00",
						"08:00",
						"09:00",
						"10:00",
						"11:00",
						"12:00",
						"13:00",
						"14:00",
						"15:00",
						"16:00",
						"17:00",
						"18:00",
						"19:00",
						"20:00",
						"21:00",
						"22:00",
						"23:00"
					]
				]
			}
		},
		onNavigationBarButtonTap(e) {
			this.preservationBtn();
		},
		onLoad(options) {
			this.id = options.id;
			if(uni.getStorageSync("weekData")){
				let data = uni.getStorageSync("weekData");
				console.log(data)
				let week = data.week;
				let start = data.day_start;
				let end = data.day_end;
				if(week){
					let weekArr = week.indexOf(",") != -1 ? week.split(",") : [week];
					// for(let i=0;i<weekArr.length;i++){
					// 	this.weekFlagArr.splice(Number(weekArr[i])-1,1,true);
					// }
					for(let i=0;i<this.weekFlagArr.length;i++){
						let flkag = true;
						for(let j=0;j<weekArr.length;j++){
							if(i==(Number(weekArr[j])-1)){
								flkag = false;
							}
						}
						if(flkag){
							this.weekFlagArr.splice(i,1,false);
						}else{
							this.weekFlagArr.splice(i,1,true);
						}
					}
					this.allWeek = true;
				}
				if(start){
					this.startTimes = start;
					let time1 = start.split("-")[0];
					let time2 = start.split("-")[1];
					this.startTime = [Number(time1.split(":")[0]).toString(),Number(time1.split(":")[1]).toString(),'0',Number(time2.split(":")[0]).toString(),Number(time2.split(":")[1]).toString()];
				}
				if(end){
					this.endTimes = end;
					let time1 = end.split("-")[0];
					let time2 = end.split("-")[1];
					this.endTime = [Number(time1.split(":")[0]).toString(),Number(time1.split(":")[1]).toString(),'0',Number(time2.split(":")[0]).toString(),Number(time2.split(":")[1]).toString()];
				}
			}
		},
		methods: {
			showChoiceTime1(){
				this.time1Flag = true;
			},
			showChoiceTime2(){
				this.time2Flag = true;
			},
			cancel(e){
				console.log(e)
				this.time1Flag = false;
			},
			confrim(e){
				console.log(e)
				let eTime = e.time;
				this.time1Flag = false;
				let time1 = eTime.split("-")[0];
				let time2 = eTime.split("-")[1];
				let time1Num = Number(time1.split(":")[0])*60*60 + Number(time1.split(":")[1])*60;
				let time2Num = Number(time2.split(":")[0])*60*60 + Number(time2.split(":")[1])*60;
				if(time1Num>time2Num){
					this.$refs.uToast.show({
						title:"结束时间不能小于开始时间",
						type:"error",
						duration:2000
					})
					return false;
				}
				this.startTime = [Number(time1.split(":")[0]).toString(),Number(time1.split(":")[1]).toString(),'0',Number(time2.split(":")[0]).toString(),Number(time2.split(":")[1]).toString()];
				this.startTimes = e.time;
			},
			cancel1(e){
				console.log(e)
				this.time2Flag = false;
			},
			confrim1(e){
				console.log(e)
				let eTime = e.time;
				this.time2Flag = false;
				let time1 = eTime.split("-")[0];
				let time2 = eTime.split("-")[1];
				let time1Num = Number(time1.split(":")[0])*60*60 + Number(time1.split(":")[1])*60;
				let time2Num = Number(time2.split(":")[0])*60*60 + Number(time2.split(":")[1])*60;
				if(time1Num>time2Num){
					this.$refs.uToast.show({
						title:"结束时间不能小于开始时间",
						type:"error",
						duration:2000
					})
					return false;
				}
				this.endTime = [Number(time1.split(":")[0]).toString(),Number(time1.split(":")[1]).toString(),'0',Number(time2.split(":")[0]).toString(),Number(time2.split(":")[1]).toString()];
				this.endTimes = e.time;
			},
			getAllWeek(){
				let flag = false;
				for(let i=0;i<this.weekFlagArr.length;i++){
					if(this.weekFlagArr[i]){
						flag = true;
					}
				}
				this.allWeek = flag;
			},
			sureChoice(){
				this.weekFlag = false;
				this.getAllWeek();
			},
			calcelChoice(){
				this.weekFlagArr = JSON.parse(JSON.stringify(this.oldWeek));
				this.weekFlag = false;
				this.getAllWeek();
			},
			showWeekFun(){
				this.oldWeek = JSON.parse(JSON.stringify(this.weekFlagArr))
				this.weekFlag = true;
			},
			choiceWeek(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let flag = this.weekFlagArr[index];
				this.weekFlagArr.splice(index,1,!flag);
			},
			//结束时间
			selectendTime(e){
				this.endTime = e.detail.value[0] + ":00" + "-" + e.detail.value[1] + ":00";
				this.endTimes = e.detail.value[0] + ":00" + "-" + e.detail.value[1] + ":00";
			},
			//开始时间
			selectstartTime(e){
				console.log(e);
				this.startTime = e.detail.value[0] + ":00" + "-" + e.detail.value[1] + ":00";
				this.startTimes = e.detail.value[0] + ":00" + "-" + e.detail.value[1] + ":00";
			},
			selectWeek(index){
				this.day = this.weekList[index].text
			},
			//保存
			preservationBtn(){
				// console.log("111");
				
				let BusinessHours = this.day+" "+this.startTime+"-"+this.endTime
				let obj = {};
				obj.id = this.id;
				obj.user_id = uni.getStorageSync("userId");
				let str = "";
				for(let i=0;i<this.weekList.length;i++){
					if(this.weekFlagArr[i]){
						if(str == ""){
							str = str + (i+1);
						}else{
							str = str + "," + (i+1);
						}
					}
				}
				obj.week = str;
				obj.day_start = this.startTimes;
				obj.day_end = this.endTimes;
				if(!obj.week){
					this.$refs.uToast.show({
						title: '选择营业日'
					})
					return false;
				}
				if(!this.startTime&&!this.endTime){
					this.$refs.uToast.show({
						title: '选择营业时间'
					})
					return false;
				}
				console.log(obj)
				this.$u.api.shopEdit(obj).then(res => {
					//console.log(res)
					this.$refs.uToast.show({
						title: "修改成功",
						type: "success",
						duration: 2000
					})
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let nowPage = pages[ pages.length - 1];  //当前页页面实例
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					prevPage.$vm.getDetail(); 
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
				
			}
		}
	}
</script>

<style scoped lang="less">
	.sure{
		width: calc(100% - 48upx);
		height: 80upx;
		margin: 20upx auto;
		line-height: 80upx;
		border-radius: 8upx;
		background: #FFAC3F;
		color: white;
		font-size: 28upx;
		text-align: center;
	}
	
	.sheetBox{
		width: 100%;
		background: white;
		z-index: 100;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.sheetBoxMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 99;
	}
	.weekItem{
		width: 100%;
		height: 82upx;
		border-bottom: 2upx solid #f3f3f3;
		line-height: 80upx;
		padding: 0 24upx;
		box-sizing: border-box;
		font-size: 28upx;
		display: flex;
		align-items: center;
	}
	.weekItem>view{
		width: 32upx;
		height: 32upx;
		border-radius: 4upx;
		display: flex;
		align-items: center;
		border: 2upx solid #333333;
		box-sizing: border-box;
		margin-right: 10upx;
		justify-content: center;
	}
	.weekItem>view.active{
		background: #FFAC3F;
		border-color: #FFAC3F;
	}
	.weekItem>view>image{
		width: 16upx;
		height: 16upx;
	}
	.weekItem>text{
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
	}
	
	
.BusinessHours{
	background-color: #F3F3F3;
	height: 100vh;
	overflow: auto;
	// padding-top: 88upx;
	.preservationBtn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750upx;
		height: 100upx;
		background-color: #FFAC3F;
		.preservationtxt{
			font-size: 28upx;
			color: #FFFFFF;
			font-weight: 400;
			text-align: center;
			line-height: 100upx;
		}
	}
	.StoreAddressBox{
		margin-top: 16upx;
		.toStoreAddressItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32upx 24upx;
			background-color: #fff;
			width: 750upx;
			border-bottom: 2upx solid #EDEDED;
			.addresstitle{
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.addressNameBox{
				display: flex;
				align-items: center;
				.addressName{
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-right: 8upx;
				}
			}
		}
	}
}
</style>
